<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<link href="__PUBLIC__/admin/sncss/css/style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="__PUBLIC__/admin/sncss/js/jquery.js"></script>
<style>.pages a,.pages span {
	display:inline-block;
	padding:2px 5px;
	margin:0 1px;
	border:1px solid #f0f0f0;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
	border-radius:3px;
}
.pages a,.pages li {
	display:inline-block;
	list-style: none;
	text-decoration:none; color:#58A0D3;
}
.pages a.first,.pages a.prev,.pages a.next,.pages a.end{
	margin:0;
}
.pages a:hover{
	border-color:#50A8E6;
}
.pages span.current{
	background:#50A8E6;
	color:#FFF;
	font-weight:700;
	border-color:#50A8E6;
}
#list li {height: 35px;}
.catename1 {width: 25%; font-size:12px;line-height: 35px;text-indent: 11px;border-bottom: 1px solid rgb(200, 216, 233); text-align:left;float: left;}
.catename2 {width: 25%; font-size:12px;line-height: 35px;text-indent: 11px;border-bottom: 1px solid rgb(200, 216, 233); text-align:left;float: left;}
.catename3 {width: 25%; font-size:12px;line-height: 35px;text-indent: 11px;border-bottom: 1px solid rgb(200, 216, 233); text-align:left;float: left;}
.catename4 {width: 25%; font-size:12px;line-height: 35px;text-indent: 11px;border-bottom: 1px solid rgb(200, 216, 233); text-align:left;float: left;}
</style>

</head>


<body>

<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a>首页</a></li>
<li><a>分类管理</a></li>
<li><a>分类列表</a></li>
</ul>
</div>

<div class="rightinfo">
<form id="form1" runat="server">
  <div> 拖动时同时更新数据库数据：
    <input type="checkbox" id="check" />
  <span id="show"></span>
  </div>
  <table class="tablelist">
		<thead>
		<tr>
		<th width="25%">编号</th>
		<th width="25%">名称</th>
		<th width="25%">创建时间</th>
		<th width="25%">操作</th>
		</tr>
		</thead>
	</table>
  <div>
    <input type="hidden" id="orderlist" />
		<ul id="list">
			<foreach name='catelist' item='v' key='key'>
			<li id="{$v.id}" title="{$v.sortid}">
			<div class="catename1">{$v.id}</div>
			<div class="catename2">{$v.name}</div>
			<div class="catename3">{$v.time}</div>
			<div class="catename4"><a href="{:U('/Home/Cate/cate_edit',array('id'=>$v['id']))}" class="tablelink">修改</a></div>
			</li>
			</foreach>
		</ul>
</div>
  </div>

</form>
</body>
<script src="__PUBLIC__/admin/Js/jquery.min.js"></script>
<script src="__PUBLIC__/admin/Js/jquery-ui.min.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {

        //保存常用选择器
        var list = jQuery("#list"); //ul
        var show = jQuery("#show"); //输出提示
        var orderlist = jQuery("#orderlist");   //原顺序
        var check = jQuery("#check");   //是否更新到数据库
        //保存原来的排列顺序
        var order = [];
        list.children("li").each(function() {
            order.push(this.title); //原排列顺序保存在title，得到后更改title
            jQuery(this).attr("title", "你可以拖动进行排序");
        });
        orderlist.val(order.join(','));
        //ajax更新
        var Update = function(itemid, itemorder) {
            jQuery.ajax({
                type: "post",
                url: "/Home/Cate/cate_ajax",
                data: { id: itemid, order: orderlist.val() },   //id:新的排列对应的ID,order：原排列顺序
                beforeSend: function() {
                    show.html("正在更新");
                },
                success: function(req) {
                    if (req == "100") {
                        show.html("更新成功");
                    }
                    else if (req == "001") {
                        show.html("失败，请稍后再试");
                    }
                    else {
                        show.html("参数不全");
                    }
                }
            });
        };
        //调用ajax更新方法
        var Submit = function(update) {
            var order = [];
            list.children("li").each(function() {
                order.push(this.id);
            });
            var itemid = order.join(',');
            //如果单选框选中，则更新表中排列顺序
            if (update) {
                Update(itemid);
            }
            else {
                show.html("");
            }
        };


        //执行排列操作
        list.sortable({
            opacity: 0.7,
            update: function() {
                Submit(check.attr("checked"));
            }
        });

    });
</script>
</html>
